<!DOCTYPE html>
<html lang="zh_CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>词条</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport"
		content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="https://gitee.com/huaflower/CommonFile/raw/master/css/sm.min.css">
	<link rel="stylesheet" href="https://gitee.com/huaflower/CommonFile/raw/master/css/sm-extend.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
	<script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

	<!-- <link rel="stylesheet" href="../../css/sm.min.css">
	<link rel="stylesheet" href="../../css/sm-extend.min.css">
	<script type="text/javascript" src="../../common/common/common.js"></script>
	<link rel="stylesheet" href="../../css/sm.min.css">
	<link rel="stylesheet" href="../../css/sm-extend.min.css"> -->

	<!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->

	<style type="text/css">
		/*css 的样式都放在这里*/
		/*词条块样式设计*/
		#citiao_kuai {
			width: 94%;
			margin-left: 3%;
		}

		#citiao_neirong_title, #moxiecitiao_neirong_title {
			/*border: solid red 1px;*/
			padding-top: 15px;
			padding-bottom: 15px;
			border-bottom: gainsboro 1px solid;
			font-weight: 700;
			color: #02CAAD;
			margin-bottom: 10px;
			text-align: center;
		}

		.citiao_neirong_class, .moxiecitiao_neirong_class {
			height: calc(100% - 56px);
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			background: #fff;
			word-break: break-all;
		}

		/*工具栏字体颜色*/
		.tab-label {
			color: cornflowerblue;
		}

		/*背景颜色*/
		#con {
			background: white;
		}

		#citiao_kuai, #moxiecitiao_kuai {
			box-sizing: border-box;
			height: 100%;
			padding-bottom: 10px;
		}

		/*关键词颜色*/
		#citiao_kuai ii, .moxiecitiao_neirong_class ii, .opacitys {
			color: #FF6A49;
			border-bottom: 1px solid #000;
		}

		/*默写词条*/
		/*默写词条块样式设计*/
		#moxiecitiao_kuai,
		#moxiecitiao_daan {
			width: 94%;
			margin-left: 3%;
		}

		.moxiecitiao_neirong_class {
			/*border: solid red 1px;*/
			/* margin-top: 15px; */
			word-break: break-all;
			/*padding-bottom: 5px;*/
		}

		/*默写词条工具栏字体颜色*/
		.tab-label {
			color: #02CAAD;
		}

		/*默写词条背景颜色*/
		/*#con{
   		background: white;
   	}*/
		/*#moxiecitiao_kuai input{
   		width: 60px;
   	}*/
		#moxiecitiao_daan {
			color: #FF6A49;
			border-top: solid 1px gray;
			margin-top: 15px;
			padding-top: 10px;
			padding-bottom: 10px;
			display: none;
		}

		#gongjulan_2 {
			display: none;
		}

		.page.page-current {
			background-color: white;
			overflow: auto;
			line-height: 1.5;
			color: #000;
		}

		.write-input {
			width:60px;
			border: none;
			border-bottom: 1px solid #000;
			border-radius: 0;
			outline: none;
			padding: 0;
			margin: 0;
			display: none;
		}

		.text_input {
			color: #FF6A49;
			display: none; border-bottom: 1px solid #000;
		}

		.page.page-current {
			box-sizing: border-box;
			padding: .75rem;
			background: #f7f7f8;
			height: 100%;
		}

		#con_first, #con_second {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0.5rem;
			height: calc(100% - 50px);
			padding-bottom: 10px;
		}

		.tab-item-box {
			width: 70%;
			margin: auto;
		}

		.tab-item-box img {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: contain;
		}

		.bar {
			background-color: #fff;
		}
	</style>


</head>

<body>
	<div class="page-group">
		<div class="page page-current">

			<!-- html代码内容区域 -->
			<div id="con_first">
				<!--词条块-->
				<div id="citiao_kuai">
					<div id="citiao_neirong_title">
						<!--比特币，从虚拟走向现实道阻且长-->
					</div>
					<div id="citiao_neirong_1" class="citiao_neirong_class">
						<!--(:~隐藏~:)有关情况或者提供虚假材料申领机动车驾驶证的，申请人在一年内不得再次申领机动车驾证。
					饮酒后(:~驾驶营运机会车~:)的，处(:~15日~:)拘役。-->
					</div>
					<!--<div id="citiao_neirong_2" class="citiao_neirong_class">
	    			饮酒后驾驶营运机会车的，处<ii>15日</ii>拘役
	    		</div>-->
				</div>

				<!--工具栏-->
				<nav class="bar bar-tab">
					<div class="tab-item external active" onclick="citiao_next()" href="#">
						<div class="tab-item-box">
							<img src="http://47.104.254.28/commonfile/img/img/citiao/xyg.png" alt="">
						</div>
					</div>
					<div class="tab-item external orcollection" onclick="citiao_moxie()">
						<div class="tab-item-box">
							<img src="http://47.104.254.28/commonfile/img/img/citiao/mx.png" alt="">
						</div>
					</div>
					<div class="tab-item external orcollection" onclick="citiao_remember()">
						<div class="tab-item-box">
							<img src="http://47.104.254.28/commonfile/img/img/citiao/jzl.png" alt="">
						</div>
					</div>
				</nav>

				<!-- <nav class="bar bar-tab">
					<span class="tab-item external active" onclick="citiao_moxie()" href="#">
						<span class="icon icon-home"></span>
						<span class="tab-label" id="citiao_gongjulan">默写</span>
					</span>
					<span class="tab-item external orcollection" onclick="citiao_cllect()">
						<span class="icon icon-me"></span>
						<span class="tab-label" id="citiao_gongjulan">收藏</span>
						<span class="badge">2</span>
					</span>
					<span class="tab-item external" onclick="citiao_share()">
						<span class="icon icon-star"></span>
						<span class="tab-label" id="citiao_gongjulan">分享</span>
					</span>
				</nav> -->

			</div>




			<div id="con_second">
				<!--词条块-->
				<div id="moxiecitiao_kuai">
					<div id="moxiecitiao_neirong_title">
						<!--比特币，从虚拟走向现实道阻且长-->
					</div>
					<div id="moxiecitiao_neirong_1" class="moxiecitiao_neirong_class">
						<!--<input type="" name="" id="" value="" />有关情况或者提供虚假材料申领机动车驾驶证的,<input type="" name="" id="" value="" />在一年内不得再次申领机驾证。-->
					</div>
					<!--<div id="moxiecitiao_neirong_2" class="moxiecitiao_neirong_class">
	    			饮酒后驾驶营运机会车的，处<input type="" name="" id="" value="" />拘役
	    		</div>-->
				</div>
				<!--答案块-->
				<!-- <div id="daan">
					<div id="moxiecitiao_daan">
						正确答案：隐藏、申请人、15日
					</div>
				</div> -->


				<nav class="bar bar-tab">
					<div class="tab-item external active" onclick="citiao_next()" href="#">
						<div class="tab-item-box">
							<img src="http://47.104.254.28/commonfile/img/img/citiao/xyg.png" alt="">
						</div>
					</div>
					<div class="tab-item external orcollection" onclick="citiao_duidaan()">
						<div class="tab-item-box">
							<img src="http://47.104.254.28/commonfile/img/img/citiao/ddl.png" alt="">
						</div>
					</div>
					<div class="tab-item external orcollection" onclick="citiao_remember()">
						<div class="tab-item-box">
							<img src="http://47.104.254.28/commonfile/img/img/citiao/jzl.png" alt="">
						</div>
					</div>
				</nav>
				

				<!--工具栏-->
				<!-- <div id="gongjulan_1">
					<nav class="bar bar-tab">
						<span id="gongju_one" class="tab-item external active">
							<span class="icon icon-home"></span>
							<span class="tab-label" id="moxiecitiao_duidaan">对答案</span>
						</span>

						<span id="gongju_two" class="tab-item external orcollection" onclick="citiao_cllect()">
							<span class="icon icon-me"></span>
							<span class="tab-label" id="moxiecitiao_gongjulan">收藏</span>
							<span class="badge">2</span>
						</span>
						<span id="gongju_three" class="tab-item external" onclick="citiao_share()">
							<span class="icon icon-star"></span>
							<span class="tab-label" id="moxiecitiao_gongjulan">分享</span>
						</span>

					</nav>
				</div>

				
				<div id="gongjulan_2">
					<nav class="bar bar-tab">

						<span id="gongju_1" class="tab-item external active">
							<span class="icon icon-home"></span>
							<span class="tab-label" id="moxiecitiao_chongxinmoxie">重新默写</span>
						</span>
						<span id="gongju_2" class="tab-item external orcollection" onclick="citiao_cllect()">
							<span class="icon icon-me"></span>
							<span class="tab-label" id="moxiecitiao_gongjulan">收藏</span>
							<span class="badge">2</span>
						</span>
						<span id="gongju_3" class="tab-item external" onclick="citiao_share()">
							<span class="icon icon-star"></span>
							<span class="tab-label" id="moxiecitiao_gongjulan">分享</span>
						</span>
						<span id="gongju_4" class="tab-item external" onclick="citiao_next()">
							<span class="icon icon-star"></span>
							<span class="tab-label" id="moxiecitiao_gongjulan">下一题</span>
						</span>
					</nav>
				</div> -->


			</div>

		</div>
	</div>





	<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
	<script type="text/javascript"
		src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
		charset='utf-8'></script>
		
	<!-- <script type="text/javascript"
		src="../../js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='../../zepto/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm-extend.min.js'
		charset='utf-8'></script> -->


	<script type="text/javascript">
		// 函数区域，函数放在“初始化区域的上面”
		//	默写词条标题栏样式变化
		var dataStr = "";
		var strlength = "";//input的length
		var bookid = "";
		var entry_id = "";
		var remember = "";//记住
		var state = "";

		//	调接口
		function getParams(data) {
			// 		data需要转成json调用 ，函数urlParamParseJson();
			var jsonData = urlParamParseJson(data);
			var params = {
				//	  		book_id教材id；chapter_id章id；
				book_id: jsonData.book_id,
				chapter_id: jsonData.chapter_id
			}
			bookid = jsonData.book_id;
			net_request('get', 'api/v1/entries/' + jsonData.itemid, params, successCallBack, errorCallBack);
		}

		//成功的回调函数
		function successCallBack(data) {
			if (!data.success) {
				$.toast(data.message, 2000);
			}
			//		console.log(data);
			//		词条回调
			if (isNotNull(data)) {
				if (data.success == true) {
					var citiao = data.data;
					entry_id = citiao.id;
					//	            console.log(entry_id);
					if (isNotNull(citiao.entry_title)) {
						$$("#citiao_neirong_title").text(citiao.entry_title);
					}
					if (isNotNull(citiao.entry_content)) {
						var dataStr = citiao.entry_content;
						//	            	dataStr=dataStr.replace(/::~/, "W3School");
						dataStr = dataStr.replace(/::~/g, "<ii>");
						dataStr = dataStr.replace(/~::/g, "</ii>");
						$$("#citiao_neirong_1").html(dataStr);
					}
				}
			}
			//	            默写词条回调
			if (isNotNull(data)) {
				if (data.success == true) {
					var moxiecitiao = data.data;
					if (isNotNull(moxiecitiao.entry_title)) {
						$$("#moxiecitiao_neirong_title").text(moxiecitiao.entry_title);
					}
					if (isNotNull(moxiecitiao.entry_content)) {
						dataStr = moxiecitiao.entry_content;
						var str = dataStr.match(/::~(.*?)~::/g);
						var answer = "正确答案：";
						var answerArray = [];
						remember = "";
						strlength = str.length;
						dataStr = dataStr.replace(/::~/g, "<span class='opacitys'><ii style='opacity: 0;'>");
						dataStr = dataStr.replace(/~::/g, "</ii></span><input class='write-input' style='' type='' name='' value='' /><span class='text_input' style=''></span>");
						// dataStr = dataStr.replace(/::~(.*?)~::/g, '<span>"+ dataStr +"</span>');

						// dataStr = dataStr.replace(/::~(.*?)~::/g, '<input class="write-input" style="" type="" name="" value="" /><span class="text_input" style=""></span>');

						// for (var i = 0; i < str.length; i++) {
						// 	//						正确答案,以及正确答案后是否需要顿号
						// 	if (i == (str.length - 1)) {
						// 		answer += str[i].match(/::~(.*?)~::/)[1];
						// 	} else {
						// 		answer += str[i].match(/::~(.*?)~::/)[1] + "、";
						// 	}
						// 	remember += str[i].match(/::~(.*?)~::/)[1] + "✎";
						// }
						//					console.log(remember)
						// document.getElementById("moxiecitiao_daan").innerHTML = answer;
						document.getElementById("moxiecitiao_neirong_1").innerHTML = dataStr;
						$$('.opacitys').on('click', function() {
							$(this).hide().next().show().focus();
						});
						$$('.write-input').focusout(function() {
							let vals = $$.trim($$(this).val())
							$$(this).val(vals);
							if (vals) {
								$$(this).next().text(vals).show();
								$$(this).hide();
							} else {
								$$(this).hide().prev().show();
							}
						})
						$$('.write-input').on('change', function() {
							let vals = $$.trim($$(this).val())
							$$(this).val(vals);
							if (vals) {
								$$(this).next().text(vals).show();
								$$(this).hide();
							}
						})

						$$('.text_input').on('click', function() {
							$$(this).hide().text('').prev().show().focus();
						});
					}
				}
			}
		}

		// 失败的回调函数
		function errorCallBack(data) {
			console.log(data);
		}
		function citiao_moxie() {
			$$("#con_first").hide();
			$$("#con_second").show();
		}

		function citiao_duidaan() {
			$$("#con_first").show();
			$$("#con_second").hide();
			$$('.text_input').each(function() {
				// $$(this).hide().text('').prev().val('');
				$$(this).hide().text('').prev().hide().val('').prev().show();
			});
		}

		//	记住词条
		function citiao_remember() {
			var params = {
				user_id: curuserid,
				entry_id: entry_id,
				state: 1
			}
			net_request('post', 'api/v1/memories', params, remembersuccessCallBack, remembererrorCallBack);
		}
		function remembersuccessCallBack(data) {

			if (isNotNull(data)) {
				if (data.success == true) {
					console.log(data);
					$.toast('已记住', 2000)
				}
			}
		}
		function remembererrorCallBack(data) {
			console.log(data);
		}

		//分享
		function citiao_share() {
			native_goto('local/share_html');
		}

		//下一题
		function citiao_next() {
			$$("#gongjulan_1").css("display", "block");
			$$("#gongjulan_2").css("display", "none");
			$$("#moxiecitiao_daan").css("display", "none");
			$$("#con_first").show();
			$$("#con_second").hide();
			//$$("#con_second").hide();
			var params = {
				user_id: curuserid,
				book_id: bookid,
				id: entry_id
			}
			//		console.log(params);
			net_request('get', 'api/v1/nextEntry', params, successCallBack, errorCallBack);
		}

		// 初始化区域
		$$(function () {
			$$("#con_second").hide();

			// getParams("getParams?itemid=1&book_id=" + 1 + "&chapter_id=" + 1);

			$.init();

		});




	</script>
</body>

</html>